<template>
	<view class="signList">
		<z-paging ref="paging" :refresher-out-rate="0.8" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" safe-area-inset-bottom bg-color="#FFF"
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-text="暂无内容" :refresher-status.sync="refresherStatus" auto-scroll-to-top-when-reload
			v-model="dataList" @query="queryList">
			<view class="top flex_wrap row_middle row_between">
				<view class="flex_wrap row_middle pepole">
					<u--image v-if="userDetails.avatar == 'null'" :src="`/static/img/conference/MissingAvatar.png`"
						shape="circle" width="80" height="80"></u--image>
					<u--image v-else :src="
					        userDetails.avatar ||
					        `/static/img/conference/MissingAvatar.png`
					    " shape="circle" width="80" height="80"></u--image>
					<view style="width: 36rpx"></view>
					<view class="flex_wrap flex_column left">
						<view>
							<u--text v-if="userDetails.nickName == 'null'" text="微信用户" color="#FFF" size="40rpx" />
							<u--text v-else :text="
                                    userDetails.nickName ||
                                    '微信用户'
                                " color="#FFF" size="40rpx" />
						</view>
						<view><u--text :text="userDetails.customerPhone" color="#FFF" size="28rpx" bold /></view>
					</view>
				</view>
			</view>
			<view class="cellBox">
				<view class="detail" v-for="(item, index) in dataList" :key="index"
					@click="to_cardDetail(item.cardNum,item.maturityTime)">
					<view class="detail_title">
						<view class="detail_title_right">
							<u-icon name="/static/img/myUserManage/cardicon.png" size="40rpx" />
							<u-text :text="`激活时间：`+`${item.activationTime.split('T')[0]}`" size="32rpx" color="#333"
								margin="0 16rpx 0 20rpx" />
						</view>
						<u-text :text="item.cardType+'卡'" size="32rpx" color="#333" align="right" />
					</view>
					<view class="detail_bot">
						<view class="detail_bot_bg" :style="{backgroundImage: statusType[item.cardType]}">
							<text
								:class="item.cardType == 'C' ?'detail_bot_bg_t' : 'detail_bot_bg_tt'">{{item.cardNum}}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		cardListByuser
	} from "@/api/salesmanMeeting.js";

	export default {
		data() {
			return {
				statusType: {
					A: "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/09/14/07eb53aa857346768327c8fec000b388.png)",
					C: "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/09/14/bde03ba5052a46c78eb09bc8f268f2f7.png)",
					D: "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/01/3fe0cf0abac34423a89926cf771c20d5.png)",
					E: "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/01/3fe0cf0abac34423a89926cf771c20d5.png)",
					F: "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/30/232624a4eae34d198aa9b26e454a0361.png)",
				},
				cardType: 'A',
				dataList: [],
				phone: '',
				userDetails: {}
			};
		},
		onLoad(options) {
			this.phone = options.customerPhone;
			this.userDetails = options
		},

		methods: {
			queryList(pageNo, pageSize) {
				cardListByuser(this.phone)
					.then((res) => {
						this.total = res.data.total;
						this.$refs.paging.completeByNoMore(res.data, false);
					})
					.catch(() => {
						this.$refs.paging.complete(false);
					});
			},
			to_cardDetail(cardNum, maturityTime) {
				uni.$u.route({
					url: '/pages_my/user_manage/cardList/detail',
					params: {
						cardNum: cardNum,
						maturityTime: maturityTime
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.signList {
		::v-deep.u-line {
			height: auto !important;
		}

		position: relative;
	}

	.pepole {
		padding-left: 80rpx;
		padding-bottom: 64rpx;
	}

	.top {
		height: 372rpx;
		width: 100%;
		box-sizing: border-box;
		background-image: url("@/static/img/conference/userDetailsbg.png");
		background-size: cover;
	}

	.cellBox {
		width: 92vw;
		margin: 60rpx auto 0;

		::v-deep .u-cell {
			box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
			margin-top: 32rpx;
			border-radius: 20upx;
		}

		::v-deep .u-cell__body {}
	}

	.detail {
		width: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin: 10rpx auto 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

		&_title {
			width: 100%;
			padding: 8rpx 24rpx 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #dfdfdf;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&_right {
				display: flex;
				align-items: center;
			}
		}

		&_bot {
			padding: 28rpx 18rpx 14rpx;
			font-size: 24rpx;
			color: #333;

			&_bg {
				width: 100%;
				height: 362rpx;
				background-size: cover;
				background-position: center;

				&_t {
					display: block;
					text-align: right;
					padding: 300rpx 68rpx 0 0;
				}

				&_tt {
					display: block;
					padding: 300rpx 0 0 68rpx;
				}
			}

		}
	}
</style>
